<template>
	<view>
		<view class='bg-set'></view>
		<view class='login'>
			<view class='logo'>
				<image src='/static/login.png'></image>
			</view>
			<view class='form'>
				<input type="number" v-model="loginForm.username" class='input' placeholder="请输入手机号"
					placeholder-class="placeholder">
			</view>
			<view class='form' v-if='phonelogin'>
				<input type='text' v-model="loginForm.password" class='input' :password="show" placeholder="请输入密码"
					placeholder-class="placeholder">
				<sunui-password @change="showPass" />
			</view>
			<view class='form' v-if='codelogin'>
				<input type="digit" controlled="true" v-model="code" class='codeinput' :password="show"
					placeholder="请输入验证码" placeholder-class="placeholder">
				<view :class="disabled ? 'huoquzhong' : 'huoqu'" @click="get_code">{{ time }}{{ text }}</view>
			</view>
			<view class='forget' @click='goto("/pages/login/forget")'>
				忘记密码？
			</view>
			<checkbox-group @change="choose">
				<view class='info1'>
					<label class="radio">
						<checkbox :value="isCheck" color="#0066ff" style="float:left;transform:scale(0.7)" />
						<view style='float:left;' @click='showxieyi'>我已阅读并同意</view>
						<view style='float:left;color:#0066ff;' @click='showxieyi'>《用户协议》</view>
						<view style='float:left;color:#0066ff;' @click='showyinsi'>《隐私政策》</view>
					</label>
				</view>
			</checkbox-group>
			<view class='btn'>
				<view class='button' :class="[rtrues()]" @click='login'>登录</view>
				<view class='desc' @click='changeway(phonelogin)' v-if='phonelogin'>验证码登录</view>
				<view class='desc' @click='changeway(phonelogin)' v-if='!phonelogin'>手机密码登录</view>
			</view>
			<view class='footer'>
				<view class='desc' @click='goto("/pages/login/register")'>没有账号？去注册</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive } from 'vue';
	// import sunuipassword from '@/components/sunui-password/sunui-password.vue';
	import { useMemberStore } from '@/store/modules/member.ts';
	const memberStore = useMemberStore();

	const xieyi = ref('');
	const phonelogin = ref(true);
	const codelogin = ref(false);
	const show = ref(true);
	const isCheck = ref('1');
	const isCheckEd = ref(false);
	const disabled = ref(false);
	// const username = ref('15882998333');
	// const password = ref('123456');
	const code = ref('');
	const ltype = ref('');
	const text = ref('获取验证码');
	const time = ref('');
	const hasshowfirst = ref('');
	const loginForm = reactive({
		username: '15882998333',
		password: '123456'
	})
	const rules = reactive({
		password: {
			rule: /^[0-9a-zA-Z]{1,16}$/,
			msg: "密码应该为1-16位"
		},
		username: {
			rule: /^1[3456789]\d{9}$/,
			msg: "手机号格式错误"
		},
		code: {
			rule: /^[0-9]{4}$/,
			msg: "请输入4位数字验证码"
		}
	});

	onMounted(() => {
		// 可以在此处执行组件挂载时的逻辑
	});

	function showxieyi() {
		console.log('查看用户协议');
	}

	function showyinsi() {
		console.log('查看隐私政策');
	}

	function rtrues() {
		console.log(isCheckEd.value);
		return isCheckEd.value ? 'isCheckEd' : '';
	}

	function choose(e : any) {
		console.log(e.detail.value);
		isCheckEd.value = e.detail.value.length > 0;
	}

	function showPass(e : any) {
		console.log(e);
		show.value = e;
	}

	function changeway(r : boolean) {
		if (r) {
			phonelogin.value = false;
			codelogin.value = true;
		} else {
			phonelogin.value = true;
			codelogin.value = false;
		}
	}

	async function get_code() {
		if (disabled.value) {
			return;
		}
		if (!validate('phone')) return;
		uni.showLoading({ title: '发送中', mask: true });
		await uni.request({
			url: '你的发送短信的接口',
			data: '接口需要的参数',
			method: 'post',
		});
		// 处理响应结果...
		// ...
	}

	function validate(key : string) {
		let bool = true;
		// if (!rules[key].rule.test(eval(`this.${key}`))) {
		// 	uni.showToast({
		// 		title: rules[key].msg,
		// 		icon: 'none'
		// 	});
		// 	bool = false;
		// }
		return bool;
	}

	function setInterValFunc() {
		let timer = setInterval(() => {
			if (time.value > 0) {
				time.value--;
			} else {
				clearInterval(timer);
				disabled.value = false;
				text.value = '重新获取';
			}
		}, 1000);
	}

	function goto(url : string) {
		uni.navigateTo({ url });
	}

	function login() {
		if (!isCheckEd.value) return;
		if (!validate('phone')) return;
		if (phonelogin.value) {
			// 手机号密码登录
			if (!validate("password")) return;
			uni.showLoading({ title: '登录中', mask: true });
			memberStore.login(loginForm).then(() => {
				uni.showToast({
					icon: 'none',
					title: '登录成功'
				})
				// uni.switchTab({url:'/pages/index/index'}) //返回指定的tab页面
				//返回上一页
				uni.navigateBack();
			});

		} else {
			// 手机号验证码登录
			if (!validate("code")) return;
			uni.showLoading({ title: '登录中', mask: true });
			uni.request({
				url: '你的验证码登录接口',
				data: '接口需要的参数',
				method: 'post',
			});
			// 处理响应结果...
			// ...
		}
	}
</script>

<style>
	.bg-set {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		background: #FFFFFF;
	}

	.login {
		width: 90%;
		margin: 0 auto;
		color: #FFFFFF;
	}

	.login .logo {
		margin-top: 100rpx;
		width: 100%;
		height: 300rpx;
		text-align: center;
	}

	.login .logo image {
		width: 200rpx;
		height: 200rpx;
	}

	.login .info {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.login .form {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		/* margin-top:40rpx; */
		/* border-radius: 40rpx; */
		border-bottom: 1px solid #F2F2F2;
	}

	.login .form .left {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		float: left;
		color: #807E7E;
		text-align: center;
	}

	.login .form .next {
		float: left;
		width: 8px;
		height: 8px;
		border-top: 2px solid #807E7E;
		border-right: 2px solid #807E7E;
		transform: rotate(135deg);
		margin-top: 35rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.login .form .right {
		height: 100rpx;
		float: left;
	}

	.login .form .right .logininput {
		width: 90%;
		margin: 0 auto;
		height: 100rpx;
		line-height: 100rpx;
		color: #000000;
		font-size: 26rpx;
	}

	.login .form .input {
		width: 75%;
		margin: 0 auto;
		height: 100rpx;
		line-height: 100rpx;
		color: #000000;
		float: left;
		margin-left: 5%;
		font-size: 26rpx;
	}

	.placeholder {
		font-size: 26rpx;
		color: #807E7E;
		line-height: 60rpx;
	}

	.login .forget {
		text-align: right;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		color: #000;
	}

	.login .info1 {
		color: #807E7E;
		font-size: 24rpx;
		text-align: left;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
	}

	.login .form .codeinput {
		width: 60%;
		margin: 0 auto;
		height: 100rpx;
		line-height: 100rpx;
		color: #000000;
		float: left;
		margin-left: 5%;
		font-size: 26rpx;
	}

	.login .form .huoqu {
		width: 30%;
		height: 100rpx;
		line-height: 100rpx;
		float: right;
		font-size: 26rpx;
		text-align: center;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #0066FF;
	}

	.login .form .huoquzhong {
		width: 30%;
		height: 100rpx;
		line-height: 100rpx;
		float: right;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		text-align: center;
		color: #999999;
	}

	.btn {
		width: 90%;
		margin: 0 auto;
		text-align: center;
		font-size: 26rpx;
	}

	.btn .button {
		background-color: #ECECEC;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #ffffff;
		letter-spacing: 10rpx;
	}

	.btn .desc {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #807E7E;
	}

	.btn .isCheckEd {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #ffffff;
		letter-spacing: 10rpx;
		background-color: #0066ff;
	}

	.footer {
		width: 90%;
		height: 140rpx;
		margin: 0 auto;
		margin-top: 100rpx;

	}

	.footer .desc {
		width: 100%;
		margin: 0 auto;
		height: 80rpx;
		line-height: 80rpx;
		color: #807E7E;
		text-align: center;
		font-size: 26rpx;
	}
</style>